<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>罗技官方商城</title>

    <link rel="stylesheet" href="../static/libs/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../static/libs/css/reset.css">
    <link rel="stylesheet" href="../static/libs/css/Site.css">
    <link rel="stylesheet" href="../static/libs/css/tool.css">
    <link rel="stylesheet" href="../static/libs/css/commect.css">
    <link rel="stylesheet" href="../dist/css/index.css">
    <link rel="stylesheet" href="../static/libs/css/news.css">



</head>


<body class="skin-blue sidebar-mini" style="font-size: 12px;">
    <div class="navbar navbar-fixed-top">
        <style>
            .coupon {
                width: 180px;
                height: 60px;
                margin-left: 0px;
                margin-right: 10px;
                margin-top: -3px;
                float: left;
                display: inline;
            }
            
            #logout {
                position: absolute;
                left: 220px;
                top: 0;
                display: none;
            }
            
            .userinfo {
                color: #ec0a0a;
            }
        </style>

        <header class="header-box">
            <aside class="top-bar">
                <div class="container">
                    <div class="welcome-div">

                        <span><em class="userinfo"></em> 您好,欢迎来到罗技官方商城&nbsp;&nbsp;&nbsp;</span>

                        <a href="./login.html" id="btnlogin">请登录</a> <span id="gang">&nbsp; |  &nbsp;</span>
                        <a href="./Registration.html" id="btnregistered">注册</a>
                        <a href="javascript:void(0)" id="logout">[ 注销登录 ]</a>
                    </div>
                    <div class="right-tool">
                        <a class="user-a" href="#"><i class="icon-account"></i>我的账户</a>
                        <span class="f-l">|</span>
                        <div class="user-cart">
                            <a class="user-a" href="./gouwuche.html" target="_blank">
                                <i class="icon-cart">
                            <em class="number" id="txtTopNumber">0</em>
                        </i>购物车
                            </a>
                        </div>

                        <span class="phone" style="font-size: 20px;"><i style="margin-top: -5px;"></i>售前4006260228</span>
                        <span class="phone" style="font-size: 20px;"><i style="margin-top: -5px;"></i>售后4006137015</span>
                    </div>
                </div>
            </aside>
            <div class="container header-wrap">
                <a class="logo" style="margin-right: 0px; margin-left: 5px; width: 315px;" href="./logitech.html"></a>
                <a title="新品礼包" class="coupon" href="#">
                    <img src="https://images.wincheers.net/UpLoad/Web/ProductImg/2020-11-19/NEW_XM/xq.gif" />

                </a>
                <div class="header-search" id="topSearchul">
                    <div class="search-box" id="topSearch">
                        <input placeholder="G923游戏方向盘" type="text" id="txtKeyName" autocomplete="off" style="width:370px" />

                        <a class="search-sure" href="javascript:void(0);" id="btnSearch"></a>

                    </div>
                    <div id="list">

                    </div>
                    <div class="search-down" id="search-downul">
                        <ul id="messageul"></ul>
                    </div>
                    <p class="meat">
                        热门搜索:
                        <a href="#" target="_blank"> PRO X无线游戏耳机</a>
                        <a href="#" target="_blank">M575轨迹球鼠标</a>
                        <a href="#" target="_blank">G102二代</a>
                    </p>
                </div>
                <a href="#" class="header-banner" title="gpw粉">
                    <img data-original="https://images.wincheers.net/UpLoad/Web/ProductImg/2020-06-29/NEW_XM/视频办公(1).gif" />
                </a>
            </div>
        </header>

        <nav class="nav-box">
            <div class="container">
                <ul id="Nav" class="nav clearfix">
                    <li class="classify">
                        <a class="first-a" href="./productDetails.html">全部产品分类</a>
                        <div class="classify-nav">
                            <dl>
                                <dt>
                                    <a href="#" target="_blank">
                                            <i class="icon-classify-03"></i>音乐类                                    </a>
                            </dt>
                                <dd>
                                    <a href="#" target="_blank">Blue麦克风</a>
                                    <a href="#" target="_blank">蓝牙音箱</a>
                                    <a href="#" target="_blank">入耳式耳机</a>
                                </dd>
                                <dt>
                                    <a href="#" target="_blank">
                                            <i class="icon-classify-04"></i>平板电脑周边                                    </a>
                            </dt>
                                <dd>
                                    <a href="#" target="_blank">平板电脑周边</a>
                                </dd>
                                <dt>
                                    <a href="#" target="_blank">
                                            <i class="icon-classify-02"></i>游戏类                                    </a>
                            </dt>
                                <dd>
                                    <a href="#" target="_blank">游戏鼠标</a>
                                    <a href="#" target="_blank">游戏鼠标垫</a>
                                    <a href="#" target="_blank">游戏耳机麦克风</a>
                                    <a href="#" target="_blank">方向盘</a>
                                    <a href="#" target="_blank">罗技G飞行模拟器</a>
                                    <a href="#" target="_blank">游戏键盘</a>
                                </dd>
                                <dt>
                                    <a href="#" target="_blank">
                                            <i class="icon-classify-01"></i>个人电脑周边</a>
                            </dt>
                                <dd>
                                    <a href="#" target="_blank">电脑耳机麦克风</a>
                                    <a href="#" target="_blank">有线键盘</a>
                                    <a href="#" target="_blank">摄像头</a>
                                    <a href="#" target="_blank">无线键鼠套装</a>
                                    <a href="#" target="_blank">演示器</a>
                                    <a href="#" target="_blank">摄像头配件</a>
                                    <a href="#" target="_blank">蓝牙鼠标</a>
                                    <a href="#" target="_blank">激光鼠标</a>
                                    <a href="#" target="_blank">无线鼠标</a>
                                    <a href="#" target="_blank">有线键鼠套装</a>
                                    <a href="#" target="_blank">有线鼠标</a>
                                    <a href="#" target="_blank">无线键盘</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li><a class='first-a' href="#" id="0">会员福利</a></li>
                    <li><a class='first-a' href="#" id="1">新品专区</a><em class="hot-bg"></em></li>
                    <li><a class='first-a' href="#" id="0">配件专区</a></li>
                    <li><a class='first-a' href="#" id="0">会议专区</a></li>
                    <li><a class='first-a' href="#" id="1">企业采购</a><em class="hot-bg"></em></li>
                    <li><a class='first-a' href="#" id="0">关于罗技</a></li>
                </ul>
            </div>
        </nav>





    </div>


    <nav id="online-service">
        <ul class="online-ul">
            <li class="items item">
                <div class="item-icon">
                    <img data-original="../static/libs/images/icon-online-01.png">
                </div>
                <p class="text">售前咨询</p>
                <div class="bg"></div>
                <div class="detail detail-01" style="display: none;">
                    <div class="detail-item">
                        <div class="name">
                            <!-- 在线客服图标:默认图标结束-->

                            <a id="YSF-BTN-HOLDERS" href="javascript:;">
                                <img data-original="../static/libs/images/icon-online-06.png"> 在线咨询
                            </a>

                        </div>
                        <p class="time">周一至周日: 9:00-18:00</p>
                    </div>
                    <div class="detail-item">
                        <p class="hotline">热线电话</p>
                        <p class="phone">400-6260-228</p>
                        <p class="time">周一至周五: 9:00-18:00</p>
                    </div>
                    <div class="detail-item detail-item-03">
                        <p class="hotline">采购专线</p>
                        <p class="phone">021-60716960</p>
                        <p class="time">周一至周五: 9:00-18:00</p>
                    </div>

                </div>
            </li>
            <li class="items item">
                <div class="item-icon">
                    <img data-original="../static/libs/images/icon-online-02.png">
                </div>
                <p class="text">售后咨询</p>
                <div class="bg"></div>
                <div class="detail details" style="height: 156px; display: none;">

                    <div class="list">
                        <p class="text1">全国售后</p>
                        <p class="text2">4006137015</p>
                    </div>
                    <!--https://shop.sennheiser.com.cn/Help/index/14   -->
                    <a class="after-sales" href="#" target="_blank">点击查看售后网点&gt;&gt;</a>
                </div>
            </li>
            <li class="items item">
                <div class="item-icon">
                    <img data-original="../static/libs/images/icon-online-03.png">
                </div>
                <p class="text">官方微信</p>
                <div class="bg"></div>
                <div class="detail detail-1" style="display: none;">
                    <div>
                        <img src="../static/libs/images/logweixin.png" alt="">
                    </div>
                    <p class="mall">官方微信</p>
                </div>
            </li>
            <li class="item" onclick="goTop()">
                <div class="item-icon">
                    <img src="../static/libs/images/icon-online-04.png">
                </div>
                <p class="text">TOP</p>
            </li>
        </ul>
    </nav>
    <section>
        <aside>
            <link rel="stylesheet" href="../static/libs/css/swiper.css">
            <section>
                <aside id="IndexFlash" class="index-slider">
                    <div class="sc_container">
                        <!-- 轮播图 -->
                        <div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                            <div class="swiper-wrapper" id="swiper-wrapper-c0927e8b5b0d2abd" aria-live="polite">
                                <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 10" style="width: 1889px;background-color: rgb(107, 123, 211);"><img data-original="../static/libs/images/kda-pc.jpg" alt=""></div>
                                <div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 10" style="width: 1889px;background-color:  rgb(255, 238, 220);"><img data-original="../static/libs/images/k860.jpg" alt=""></div>
                                <div class="swiper-slide" role="group" aria-label="3 / 10" style="width: 1889px;background-color: rgb(230, 249, 255);;"><img data-original="../static/libs/images/m380-KV .jpg" alt=""></div>
                                <div class="swiper-slide" role="group" aria-label="4 / 10" style="width: 1889px;background-color:  rgb(190, 190, 190);;"><img data-original="../static/libs/images/PRO X SUPERLIGHT.jpg" alt=""></div>

                            </div>
                            <!-- 分页器 -->
                            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
                                <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0">
                            
                        </span>
                                <span class="swiper-pagination-bullet" tabindex="0">2</span>
                                <span class="swiper-pagination-bullet" tabindex="0">3</span>
                                <span class="swiper-pagination-bullet" tabindex="0">4</span>
                            </div>
                            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                        </div>


                        <link rel="stylesheet" href="../static/libs/css/swiper-bundle.min.css">
                        <script src="../static/libs/javascripts/swiper-bundle.min.js"></script>
                        <script src="./javascripts/index.js"></script>

                    </div>

                    <div class="top-left-banner">
                        <div class="banner-box">
                            <a href="#" title="c270" target="_blank">
                                <img data-original="../static/libs/images/m380-3.png" alt="" id="img_01" />
                            </a>
                        </div>
                        <div class="banner-box">
                            <a href="#" title="" target="_blank" id="img_02">
                                <img data-original="../static/libs/images/m100r.png" alt="" />
                            </a>
                        </div>
                    </div>
                    <script src="../static/libs/javascripts/animate.js"></script>
                    <script src="./javascripts/index.js"></script>
                </aside>

                <span class="content">
                <div class="container">
                    <!-- 广告位4 -->
                    <aside class="index-box">
                        <ul class="index-add-list-01" style="display:block">
                            <li class="">
                                <a href="#" title="办公鼠标" target="_blank">
                                    <img data-original="../static/libs/images/pic4/办公鼠标.jpg" alt="办公鼠标" />
                                </a>
                            </li>
                            <li class="">
                                <a href="#" title="无线键盘" target="_blank">
                                    <img data-original="../static/libs/images/pic4/无线键盘.jpg" alt="无线键盘" />
                                </a>
                            </li>
                            <li class="">
                                <a href="#" title="键鼠套装" target="_blank">
                                    <img data-original="../static/libs/images/pic4/键鼠套装.jpg" alt="键鼠套装" />
                                </a>
                            </li>
                            <li class="">
                                <a href="#" title="g系列" target="_blank">
                                    <img data-original="../static/libs/images/pic4/G键鼠.jpg" alt="g系列" />
                                </a>
                            </li>
                            <li class="">
                                <a href="#" title="直播视频" target="_blank">
                                    <img data-original="../static/libs/images/pic4/直播视频.jpg" alt="直播视频" o />
                                </a>
                            </li>
                        </ul>
                    </aside>
                   
                    <!--广告位5-->
                    <aside class="index-box">
                        <ul class="index-add-list-02">
                            <li class="add-01">
                                <a href="#" title="联名" target="_blank">
                                    <img data-original="../static/libs/images/pic5/pro x.jpg" alt="联名" />
                                </a>
                            </li>
                            <li class="add-02">
                                <a href="#" title="g102二代" target="_blank">
                                    <img data-original="../static/libs/images/pic5/pebble.jpg" alt="g102二代" />
                                </a>
                            </li>
                            <li class="add-03">
                                <a href="#" title="master3" target="_blank">
                                    <img data-original="../static/libs/images/pic5/master 3.jpg" alt="master3" />
                                </a>
                            </li>
                            <li class="add-04">
                                <a href="#" title="keys" target="_blank">
                                    <img data-original="../static/libs/images/pic5/KEYS.jpg" alt="keys" />
                                </a>
                            </li>
                        </ul>
                    </aside>
                </span>
                <span class="content">
                    <!--广告位6-->
                    <aside class="index-box clearfix">
                        <h3 class="index-h3-title">
                            <span class="name">
            <img data-original="../static/libs/images/pic6/index-title-01.png">
            </span><a class="more-a" href="#">更多>></a>
                </h3>
                <div class="banner-content">
                    <div class="left-banner">
                        <div class="sc_container">
                            <ul>
                                <li class="">
                                    <a href="#" title="G913" target="_blank">
                                        <img data-original="../static/libs/images/pic6/g913-.jpg" alt="G913" />
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <ul class="index-add-list-03 game">
                        <li class="add-01">
                            <a href="#" target="_blank">
                                <img data-original="../static/libs/images/pic6/pro-.jpg" alt="G PRO无线有线双模游戏机械鼠标" />
                            </a>
                        </li>
                        <li class="add-02">
                            <a href="#" title="G502主宰者" target="_blank">
                                <img data-original="../static/libs/images/pic6/502-.jpg" alt="G502主宰者" />
                            </a>
                        </li>
                        <li class="add-03">
                            <a href="#" title="g102" target="_blank">
                                <img data-original="../static/libs/images/pic6/g102.jpg" alt="g102" />
                            </a>
                        </li>
                        <li class="add-04">
                            <a href="#" title="g304" target="_blank">
                                <img data-original="../static/libs/images/pic6/g04.jpg" alt="g304" />
                            </a>
                        </li>
                        <li class="add-05">
                            <a href="#" title="g402" target="_blank">
                                <img data-original="../static/libs/images/pic6/402.jpg" alt="g402" />
                            </a>
                        </li>
                    </ul>
                </div>
        </aside>
        </span>
        <span class="content">
        <!--广告位7-->

        <aside class="index-box clearfix">
            <h3 class="index-h3-title">
                <span class="name">
                <img data-original="../static/libs/images/pic7/index-title-02.png">
            </span><a class="more-a" href="#">更多>></a>
        </h3>
        <div class="banner-content">
            <div class="left-banner">
                <div class="sc_container">
                    <ul>
                        <li class="">
                            <a href="#" title="MX ANYWHERE 3" target="_blank">
                                <img data-original="../static/libs/images/pic7/anywhere3.jpg" alt="MX ANYWHERE 3" />
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="index-add-list-03">
                <li class="add-01">
                    <a href="#" title="mk270" target="_blank">
                        <img data-original="../static/libs/images/pic7/mk270.jpg" alt="mk270" />
                    </a>
                </li>
                <li class="add-02">
                    <a href="#" title="mk380" target="_blank">
                        <img data-original="../static/libs/images/pic7/k380.jpg" alt="mk380" />
                    </a>
                </li>
                <li class="add-03">
                    <a href="#" title="m325" target="_blank">
                        <img data-original="../static/libs/images/pic7/m325.jpg" alt="m325" />
                    </a>
                </li>
                <li class="add-04">
                    <a href="#" title="m220" target="_blank">
                        <img data-original="../static/libs/images/pic7/m220.jpg" alt="m220" />
                    </a>
                </li>
                <li class="add-05">
                    <a href="#" title="k580" target="_blank">
                        <img data-original="../static/libs/images/pic7/k580.jpg" alt="k580" />
                    </a>
                </li>
            </ul>
        </div>
        </aside>
        </span>
        <span class="content">
        <!--广告位8-->
        <aside class="index-box clearfix">
            <h3 class="index-h3-title">
                <span class="name">
                <img data-original="../static/libs/images/pic8/index-title-08.png">
            </span><a class="more-a" href="#">更多>></a>
        </h3>
        <div class="banner-content">
            <div class="left-banner">
                <div class="sc_container">
                    <ul>
                        <li class="">
                            <a href="#" title="cc3500" target="_blank">
                                <img data-original="../static/libs/images/pic8/会议专区.jpg" alt="cc3500" />
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="index-add-list-03">
                <li class="add-01">
                    <a href="#" title="c1000e" target="_blank">
                        <img data-original="../static/libs/images/pic8/c100e.jpg" alt="c1000e" />
                    </a>
                </li>
                <li class="add-02">
                    <a href="#" title="STREAMCAM" target="_blank">
                        <img data-original="../static/libs/images/pic8/streamcam.jpg" alt="STREAMCAM" />
                    </a>
                </li>
                <li class="add-03">
                    <a href="#" title="c270" target="_blank">
                        <img data-original="../static/libs/images/pic8/c270.jpg" alt="c270" />
                    </a>
                </li>
                <li class="add-04">
                    <a href="#" title="c930" target="_blank">
                        <img data-original="../static/libs/images/pic8/c930.jpg" alt="c930" />
                    </a>
                </li>
                <li class="add-05">
                    <a href="#" title="h600" target="_blank">
                        <img data-original="../static/libs/images/pic8/h600.jpg" alt="h600" />
                    </a>
                </li>
            </ul>
        </div>
        </aside>
        </span>
        <span class="content">
        <!--广告位9-->
        <aside class="index-box clearfix">
            <h3 class="index-h3-title">
                <span class="name">
                <img data-original="../static/libs/images/pic9/index-title-04.png">
            </span><a class="more-a" href="#">更多>></a>
        </h3>
        <div class="banner-content">
            <div class="left-banner">
                <div class="sc_container">
                    <ul>
                        <li class="">
                            <a href="#" title="Crayon多功能精准数字笔" target="_blank">
                                <img data-original="../static/libs/images/pic9/平板周边.jpg" alt="Crayon多功能精准数字笔" />
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="index-add-list-03">
                <li class="add-01">
                    <a href="#" title="ik1175" target="_blank">
                        <img data-original="../static/libs/images/pic9/1175.jpg" alt="ik1175" />
                    </a>
                </li>
                <li class="add-02">
                    <a href="#" title="Combo Touch" target="_blank">
                        <img data-original="../static/libs/images/pic9/touch.jpg" alt="Combo Touch" />
                    </a>
                </li>
                <li class="add-03">
                    <a href="#" title="ik1055BK" target="_blank">
                        <img data-original="../static/libs/images/pic9/1055.jpg" alt="ik1055BK" />
                    </a>
                </li>
                <li class="add-04">
                    <a href="#" title="ik1274" target="_blank">
                        <img data-original="../static/libs/images/pic9/1274.jpg" alt="ik1274" />
                    </a>
                </li>
                <li class="add-05">
                    <a href="#" title="Craft无线键盘" target="_blank">
                        <img data-original="../static/libs/images/pic9/1174.jpg" alt="Craft无线键盘" />
                    </a>
                </li>
            </ul>
        </div>
        </aside>
        </span>
        <span class="content">
        <!-- 广告位 10 -->
        <aside class="index-box clearfix">
            <h3 class="index-h3-title">
                <span class="name">
                                <img data-original="../static/libs/images/pic10/index-title-05.png">
                            </span><a class="more-a" href="#">更多>></a>
        </h3>
        <div class="banner-content">
            <div class="left-banner">
                <div class="sc_container">
                    <ul>
                        <li class="">
                            <a href="#" title="g923" target="_blank">
                                <img data-original="../static/libs/images/pic10/g923.jpg" alt="g923" />
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="index-add-list-03">
                <li class="add-01">
                    <a href="#" title="Instrument Panel" target="_blank">
                        <img data-original="../static/libs/images/pic10/panel.jpg" alt="Instrument Panel" />
                    </a>
                </li>
                <li class="add-02">
                    <a href="#" title="g29" target="_blank">
                        <img data-original="../static/libs/images/pic10/g29.jpg" alt="g29" />
                    </a>
                </li>
                <li class="add-03">
                    <a href="#" title="instrument" target="_blank">
                        <img data-original="../static/libs/images/pic10/带脚尖.jpg" alt="instrument" />
                    </a>
                </li>
                <li class="add-04">
                    <a href="#" title="radio" target="_blank">
                        <img data-original="../static/libs/images/pic10/专用.jpg" alt="radio" />
                    </a>
                </li>
                <li class="add-05">
                    <a href="#" title="x52" target="_blank">
                        <img data-original="../static/libs/images/pic10/x52.jpg" alt="x52" />
                    </a>
                </li>
            </ul>
        </div>
        </aside>
        </span>
        <span class="content">

        <!--新闻动态-->
        <aside class="index-news-box">
            <h3 class="index-h3-title">
                <span class="name">新闻动态</span>
        <a class="more-a" href="#">更多>></a>
        </h3>
        <ul id="indexNewsList" class="news-list clearfix">
            <li>
                <div class="img-wrap">
                    <a href="#">
                        <img data-original="../static/libs/images/NEW/20191122181754_7792.jpg">
                        <div class="bg"></div>
                    </a>
                </div>
                <div class="text-wrap">
                    <div class="text-inner">
                        <p class="name"><a href="#">罗技G502 LIGHTSPEED创世者无线游戏鼠标入选《时代》杂志2019年度100大最佳创新产品</a> </p>
                        <p class="time">2019-11-22 18:18 </p>
                        <p class="text">
                            未来，罗技G将更加关注用户体验，将创新与前沿科技不断引入产品。
                        </p>
                        <p class="more"><a href="#"> more >></a>
                    </div>
                </div>
            </li>
            <li>
                <div class="img-wrap">
                    <a href="#">
                        <img data-original="../static/libs/images/NEW/20190522143436_3779.jpg">
                        <div class="bg"></div>
                    </a>
                </div>
                <div class="text-wrap">
                    <div class="text-inner">
                        <p class="name"><a href="#">25项国际设计大奖，罗技全囊获！</a> </p>
                        <p class="time">2019-05-22 14:34 </p>
                        <p class="text">
                            退后，小罗要亮大招了。
                        </p>
                        <p class="more"><a href="#"> more >></a>
                    </div>
                </div>
            </li>
            <li class="odd">
                <div class="text-wrap">
                    <div class="text-inner">
                        <p class="name"><a href="#">罗技19财年收官，全球业绩连续第三年双位数增长！</a> </p>
                        <p class="time">2019-05-09 10:18 </p>
                        <p class="text">
                            强势增长，再创新高！
                        </p>
                        <p class="more"><a href="#"> more >></a>
                    </div>
                </div>
                <div class="img-wrap">
                    <a href="#">
                        <img data-original="../static/libs/images/NEW/20190509101842_5074.jpg">
                        <div class="bg"></div>
                    </a>
                </div>
            </li>
            <li class="odd">
                <div class="text-wrap">
                    <div class="text-inner">
                        <p class="name"><a href="#">Jaybird教你用RUN|如何操控耳机</a> </p>
                        <p class="time">2018-09-10 09:13 </p>
                        <p class="text">
                            教你用RUN|如何操控耳机
                        </p>
                        <p class="more"><a href="#"> more >></a>
                    </div>
                </div>
                <div class="img-wrap">
                    <a href="#">
                        <img data-original="../static/libs/images/NEW/20180921125922_5026.jpg">
                        <div class="bg"></div>
                    </a>
                </div>
            </li>
        </ul>
        </aside>
        </div>
        </section>
        <footer class="footer-box">
            <aside class="footer-wrap">
                <div class="container servers-box">
                    <span><i class="servers-01"></i>快递送货 产品直达</span><span><i class="servers-02"></i>独家优惠 丰富活动</span>
                    <span>
                    <i class="servers-03"></i>
                    官方网购 正品保证
                </span>
                    <span>
                    <i class="servers-04"></i>
                    多种类型 方便支付
                </span>
                    <span>
                    <i class="servers-05"></i>
                    所有产品 均有售后
                </span>
                </div>
            </aside>
            <aside class="footer-wrap">
                <div class="container help-box">
                    <dl class="help-dl">
                        <dt>|&nbsp;新手指南</dt>
                        <dd><a href="#" target="_blank">如何注册</a></dd>
                        <dd><a href="#" target="_blank">购买流程</a></dd>
                        <dd><a href="#" target="_blank">积分政策</a></dd>
                    </dl>
                    <dl class="help-dl">
                        <dt>|&nbsp;支付方式</dt>
                        <dd><a href="#" target="_blank">银行汇款</a></dd>
                        <dd><a href="#" target="_blank">发票问题</a></dd>
                        <dd><a href="#" target="_blank">在线支付</a></dd>
                    </dl>
                    <dl class="help-dl">
                        <dt>|&nbsp;配送方式</dt>
                        <dd><a href="#" target="_blank">配送范围及运费</a></dd>

                        <dd><a href="#" target="_blank">圆通配送</a></dd>
                    </dl>
                    <dl class="help-dl">
                        <dt>|&nbsp;售后服务</dt>
                        <dd><a href="#" target="_blank">罗技售后网点</a></dd>

                        <dd><a href="#" target="_blank">售后服务承诺</a></dd>
                        <dd><a href="#" target="_blank">退款说明</a></dd>
                    </dl>
                    <dl class="help-dl">
                        <dt>|&nbsp;罗技官方网站</dt>
                        <dd><a href="#" target="_blank">常见问题</a></dd>
                        <dd><a href="#" target="_blank">技术支持</a></dd>
                        <dd><a href="#" target="_blank">交易条款</a></dd>
                    </dl>
                    <div class="help-contact">

                        <p class="p1">在线客服</p>
                        </a>
                        <p class="p1">4006260228</p>
                        <p class="p2">周一至周五: 9:00-18:00</p>

                    </div>
                </div>
            </aside>
            <aside>
                <div class="container copyright">
                    <p>罗技官方商城由罗技（中国）科技有限公司授权双齐国际贸易（上海）有限公司负责经营 2021 , all rights reserved</p>
                    <p>
                        <a style="color: #7f7f7f;" href="#" target="_blank">罗技官方网站</a>
                        <a style="color: #7f7f7f;" href="#" target="_blank">联系方式</a>
                        <a style="color: #7f7f7f;" href="#" target="_blank">隐私声明</a>
                        <a style="color: #7f7f7f;" href="#" target="_blank">用户服务协议</a>

                        <a style="color: #7f7f7f;" href="#" target="_blank">沪ICP备12002604号-1</a>
                    </p>
                </div>
                <div class="container copyright" style="text-align: center; padding: 0px 0px 0px 0px">
                    <a id="imgurl" href="#" title="电子营业执照" target="_blank"><img data-original="../static/libs/images/lz4.png" style="width: 1%;height: auto;margin-right: 2px;" width="62" height="62" border="0"></a>
                    <span id="cnzz_stat_icon_1254611721"><a href="#" target="_blank" title="站长统计"><img border="0" hspace="0" vspace="0" src="../static/libs/images/pic.gif"></a></span>
                </div>
            </aside>
        </footer>
        </span>

        <ul class="btn-list">
            <li>套装专区</li>
            <li>游戏专区</li>
            <li>商务办公</li>
            <li>会议专区</li>
            <li>平板周边</li>
            <li>飞行专区</li>
            <li>新闻动态</li>
            <li>回到顶部</li>
        </ul>
</body>

<script src="../static/libs/javascripts/jquery-1.11.1.min.js"></script>
<script src="../static/libs/javascripts/cookie.js"></script>
<script src="../static/libs/javascripts/jQuery.js"></script>
<script src="../static/libs/javascripts/jquery.lazyload.js"></script>
<script src="./javascripts/index.js"></script>
<script src="../static/libs/javascripts/ajax.js"></script>
<script>
    var ipt = document.getElementById("txtKeyName")

    ipt.oninput = function() {
        var script = document.createElement("script");
        let url = "https://suggest.taobao.com/sug?";
        url += "code=utf-8";
        url += "&q=" + ipt.value;
        url += "&area=c2c";
        url += "&bucketid=atb_search";
        url += "&callback=callback";

        script.src = url;
        document.body.appendChild(script);
        script.onload = function() {
            script.remove();
        }
    }
    var list = document.getElementById("list");

    function callback(data) {
        // console.log(data);
        // 判定一下data里面是否查询到了数据，如果查询到了数据再去渲染， 如果没有查询到数据就直接清空元素内部内容; 
        if (!data.result) {
            return list.innerHTML = ""
        }

        // 渲染页面; 
        list.innerHTML = data.result.map(index => `<div class="goods">${index[0]}</div>`).join("");
    }
</script>

</html>